<template>
	<div class="zhdisk-admin-down-link-body">
		<z-form style="height:100%">

      <template #form-title>
        绑定用户设置
      </template>
      <template #form-sub-title>
        完成绑定后对应用户即可通过短链查看数据信息
      </template>

      <z-form-item label="绑定用户">
        <el-autocomplete
            v-model="query"
            placeholder="请输入"
            :fetch-suggestions="getUserList"
            :debounce="600"
            value-key="username"
            @select="handleSelect"
        />
        <template #tips>
          搜索绑定用户的用户名
        </template>
      </z-form-item> 
      <z-form-item label="已绑定用户">
        <el-tag v-for="tag in bindUserTags" :key="tag.userId" closable type="primary" @close="handleUnbind(tag)">
        {{ tag.username }}
        </el-tag>
      </z-form-item>
      

        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="saveData">保存</el-button>
            </span>
        </template>
    </z-form>
	</div>
</template>


<script setup>
import {ref} from 'vue'
import {
    apiListSystemUser,
    apiListUserShortLink,
    apiAddUserShortLink,
    apiDelUserShortLink
} from "~/api/user";
import useLinkSetting from "~/composables/admin/link/useLinkSetting";


const props = defineProps({
    shortLinkId: {
		type: Number,
		required: true
	}
})

const query = ref('')
const bindUserTags = ref([])

const getBindUserList = async() => {
    const res = await apiListUserShortLink({shortLinkId: props.shortLinkId})
    bindUserTags.value = res.data
}

getBindUserList()

const getUserList = (queryString, cb) => {
    apiListSystemUser({username: queryString}).then((response) => {
        console.log(response)
        // bindUserTags.value = response.data;
        cb(response.data)
    });
}

const handleUnbind = (val) => {
    ElMessageBox.confirm('是否取消授权该用户进行访问？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
        callback: action => {
            if (action === 'confirm') {
                apiDelUserShortLink({shortLinkId: val.shortLinkId, userId: val.userId}).then(res=>{
                    getBindUserList()
                })
            }
        }
    });
}

const handleBind = (val) => {
    ElMessageBox.confirm('是否授权该用户进行访问？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
        callback: action => {
            if (action === 'confirm') {
                apiDelUserShortLink({shortLinkId: val.shortLinkId, userId: val.userId}).then(res=>{
                    getBindUserList()
                })
            }
        }
    });
}

const handleSelect = (val) => {
    console.log('触发了', props.shortLinkId)
    ElMessageBox.confirm('是否授权该用户进行访问？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
        callback: action => {
            if (action === 'confirm') {
                apiAddUserShortLink({shortLinkId: props.shortLinkId, userId: val.id}).then(res=>{
                    getBindUserList()
                })
            }
        }
    });
}


</script>